<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>商品分类</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">            
        <!-- 引入组件 -->
        <script src="../../js/vue.min.js"></script>
        <script src="../../js/vant.min.js"></script>
        <script src="../../js/vue-lazyload.js"></script>
        <script src="../../js/ajax.js"></script>
		<style>
			body {
				background-color: #E5E5E5;
			}
			#app {
				margin-top: 46px;

			}
		</style>
    </head>
    <body>
        <div id="app">
			<header>
				<van-row>
					<van-col span="24">
						<van-search background="red" placeholder="搜索商品名称" show-action shape="round">
							<div slot="action">
								<van-icon name="chat-o" size="25px" color="white" style="margin-top:-10px;margin-top: 15px;" />
							</div>
						</van-search>
					</van-col>
				</van-row>	
			</header>
			<section>
				<van-row>
				    <van-col span="6">
				        <van-badge-group :active-key="activeKey" @change="onChange" >
				          <van-badge @click="change(item)" :title="item.Name" v-for="item in Categories">                         
				          </van-badge>
				        </van-badge-group>
				    </van-col>
				    <van-col span="18">
				        <van-col span="12" v-for="item in products">
				            <div style="width: 100%;">
				                <img v-lazy="item.GoodsImageUrl" style="width: 100%;height: 200px;" alt="">
				            </div>
				            <div style="font-size: 16px;">
				                {{item.Name}}
				            </div>
							<div style="color: red;">
										￥{{item.MarketPrice}}
							</div>
							<div style="color: #969799; font-size: 12px;">
								{{item.VirtualSaleCount}}&nbsp;&nbsp;销量
							</div>
							<div style="color: #969799; font-size: 12px;">
								{{item.BrowseCount}}&nbsp;&nbsp;次浏览
							</div>
							
				        </van-col>
				    </van-col>
				</van-row>
			</section>
            
        </div>
        <script type="text/javascript">
            Vue.use(VueLazyload, {
                error:"../../img/photo.png"
            });
        	var vm = new Vue({
        		el:"#app",
                data:{
                    activeKey:1,
                    Categories:[],
                    products:[]
                },
                methods:{
                    onChange:function(key){
                        this.activeKey = key;
                    },
                    change:function(item){
                        this.getProduct(this.Categories[this.activeKey].Id)
                    },
                    getCategories:function(){
                        var _this= this;
                        ajax({
                            url:"http://dsapi.ysd3g.com/api/Categories",
                            dataType:"jsonp",
                            success:function(res){
                               _this.Categories = res.Categories;
                               _this.getProduct(_this.Categories[_this.activeKey].Id)
                            }
                        })
                    },
                    getProduct:function(id){
                        var _this = this;
                        ajax({
                            url:"http://dsapi.ysd3g.com/api/GoodsByCategoryId",
                            dataType:"jsonp",
                            data:{
                              typeId:id, 
                              p:1  
                            },
                            success:function(res){
                                _this.products = res.Data;
                            }
                        })
                    }
                },
                created() {
                	this.getCategories();
                }
        	})
        </script>
    </body>
</html>
